<template>
  <q-toolbar color="primary">
    <!--
      对于工具栏标题，我们使用
      QToolbarTitle组件
    -->
    <q-btn v-if="showBack" push flat round dense wait-for-ripple icon="arrow_back" @click="$router.goBack()"/>
    <q-toolbar-title>
      <div style="text-align: center;width: 100%">
        {{title}}
      </div>
    </q-toolbar-title>
    <q-btn flat round dense v-if="showFilter" icon="search" :color="isFilter?'warning':''"
           @click="$emit('click-filter')">
      <q-chip floating color="red" v-show="isFilter">!</q-chip>
    </q-btn>
    <q-btn flat round dense v-if="showHelp" icon="help" @click="$emit('click-help')">
    </q-btn>
    <!--占位，可以使标题始终保持居中显示 -->
    <q-btn flat round dense v-if="showBack && (!showFilter&&!showHelp)" label="　" disable no-ripple>
    </q-btn>
    <!--
      在工具栏中，按钮最好
      配置为“flat, round, dense”并带有图标，
      但任何按钮都可以
    -->
  </q-toolbar>
</template>

<script>
  export default {
    name: 'xheader',
    props: {
      title: {},
      showFilter: { type: Boolean, default: false },
      isFilter: { type: Boolean, default: false },
      showBack: { type: Boolean, default: true },
      showHelp: { type: Boolean, default: false }
    }
  }
</script>

<style scoped>

</style>
